<template>
    <el-table
            :data="orders"
            border
            style="width: 80%">
        <el-table-column
                prop="orderSerial"
                label="订单编号"
                width="200">
        </el-table-column>
        <el-table-column
                prop="orderCreateTime"
                label="创建时间"
                width="200">
        </el-table-column>
        <el-table-column
                prop="orderConsignee"
                label="收货人"
                width="150">
        </el-table-column>
        <el-table-column
                prop="orderPhone"
                label="收货人电话"
                width="160">
        </el-table-column>
        <el-table-column
                prop="orderAddress"
                label="收货地址"
                width="160">
        </el-table-column>
        <el-table-column
                prop="orderStatus"
                label="状态"
                width="120">
                <template slot-scope="scope">
                {{scope.row.orderStatus===1?"已完成":"待发货"}}
            </template>
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="220">
            <template slot-scope="scope">
                <el-button @click="deleteOrder(scope.row.orderId)" type="danger" size="small">删除</el-button>
                <el-button @click="seeOrder(scope.row.orderId)" type="primary" size="small">查看</el-button>
                <el-button @click="returnOrder(scope.row.orderId,scope.row.orderSerial)" type="primary" size="small">退货</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
    import {delOrder} from "../../service/order";
    import {mapActions, mapMutations, mapState} from "vuex";

    export default {
        created() {
            this.showOrder();
        },
        computed: {
            ...mapState("order", ["orders"])
        },
        methods: {
            deleteOrder(orderId) {
                this.$confirm('是否删除该订单, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(async () => {
                    await delOrder(orderId);
                    this.$message({
                        type: 'success',
                        message: '删除成功!',
                    });
                    this.showOrder();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            seeOrder(orderId) {
                this.setDialogVisible(true);
                this.lookOrder(orderId);
                // this.showSnapshot(orderId);
            },
            returnOrder(orderId,orderSerial){
               this.setOrderId(orderId);
               this.setOrderSerial(orderSerial);
            this.$router.push('/returnGoods')
            },
            ...mapMutations("Return",["setOrderId","setOrderSerial"]),
            ...mapMutations("order", ["setDialogVisible"]),
            ...mapActions("order", ["showOrder", "lookOrder"]),
            ...mapActions("snapshot", ["showSnapshot"]),
        }
    }
</script>

<style scoped>

</style>